<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref, shallowRef} from "vue";
import {getSysConfig, updateSysConfig,} from "@/service/api";
import { UploadFileInfo,FormRules} from "naive-ui";
import {getServiceEnvConfig} from "~/env.config";
import {localStg} from "@/utils/storage";
//定义表单类型
const editorRef = shallowRef();
//上传图片地址
const actionUrl = ref<string>("");
//文件上传token
const token = ref<string>("");
const config = getServiceEnvConfig(import.meta.env)
//微信小程序首页轮播图
const wxmpIndexImagesList = ref<UploadFileInfo[]>([]);
//表单数据
const formModel = ref<any>({
  system_name: "",
  domain_name: "",
  ip_address: "",
  max_failed_login_attempts: "",
  password_lock_time: "",
  file_path: "",
  wx_pay_cert_sn: "",
  wx_pay_key_path: "",
  wx_pay_notify_url: "",
  wx_pay_apiv3: "",
  wx_pay_apiv2: "",
  wx_pay_mchid: "",
  wx_gz_secret: "",
  wx_gz_appid: "",
  wx_mp_secret: "",
  wx_mp_appid: "",
  deposit_times_am: "08:00:00",
  deposit_times_pm: "18:00:00",
  balance_limit: "",
  single_limit: "",
  daily_frequency: "",
  wxmp_index_images: "",
  wxmp_index_notice: "<p>hello</p>",
  RegEx_phoneNumber: "",
  RegEx_fullName: "",
  RegEx_IDCard: "",
  RegEx_CriminalSn: "",
  RegEx_CriminalFileSn: "",
});
//表单验证
const rules: FormRules = {
  system_name: [
    {required: true, message: "请输入系统名称", trigger: "blur"},
  ],
  domain_name: [
    {required: true, message: "请输入域名", trigger: "blur"},
  ],
}
//保存
async function handleSubmit() {
  formModel.value.wxmp_index_images = '';
  wxmpIndexImagesList.value.forEach((item: UploadFileInfo) => {
    formModel.value.wxmp_index_images += item.url + ",";
  });
  let res = await updateSysConfig(formModel.value);
  if (res.error) {
  } else {
    window.$message?.success("保存成功");
    await getSysConfigData();
  }
}
//获取系统配置
async function getSysConfigData() {
  // wxmpIndexImagesList.value = [];
  let res = await getSysConfig({});
  if (res.error) {
  } else {
    let configList: Api.Entity.Config[] = res.data;
    configList.forEach((item: Api.Entity.Config) => {
      formModel.value[item.configKey] = item.configValue;
    });
  }
  actionUrl.value = (import.meta.env.VITE_SERVICE_ENV == 'dev' ? config.proxyPattern : '') + "/wx/identity-auth/uploadFile";
  if (wxmpIndexImagesList.value.length === 0) {
    if (formModel.value.wxmp_index_images != null && formModel.value.wxmp_index_images !== '') {

      formModel.value.wxmp_index_images.split(",").forEach((item: string) => {

        if (item !== "" && item !== null) {
          wxmpIndexImagesList.value.push({
            id: "",
            name: "图片",
            url: item,
            status: "finished"
          });
        }
        console.log(wxmpIndexImagesList.value);
      });
    }
  }
}
//挂载时获取token
onMounted(() => {
  getSysConfigData();
  token.value = localStg.get('token') || '';
});
//销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
</script>

<template>
<div>
  <n-form ref="formRef" label-placement="left" :label-width="120" :model="formModel" :rules="rules">
    <n-grid :cols="24" :x-gap="10">
      <n-form-item-grid-item :span="12" label="系统名称" path="system_name">
        <n-input v-model:value="formModel.system_name"/>
      </n-form-item-grid-item>
      <n-form-item-grid-item :span="12" label="系统域名" path="domain_name">
        <n-input v-model:value="formModel.domain_name"/>
      </n-form-item-grid-item>
      <n-form-item-grid-item :span="12" label="IP地址" path="ip_address">
        <n-input v-model:value="formModel.ip_address"/>
      </n-form-item-grid-item>
      <n-form-item-grid-item :span="12" label="登录失败次数" path="max_failed_login_attempts">
        <n-input v-model:value="formModel.max_failed_login_attempts" :style="{width:'100%'}">
          <template #suffix>
            <div>次数</div>
          </template>
        </n-input>
      </n-form-item-grid-item>
      <n-form-item-grid-item :span="12" label="失败后锁定时间" path="password_lock_time">
        <n-input v-model:value="formModel.password_lock_time" :style="{width:'100%'}">
          <template #suffix>
            <div>分钟</div>
          </template>
        </n-input>
      </n-form-item-grid-item>
      <n-form-item-grid-item :span="12" label="文件上传位置" path="file_path">
        <n-input v-model:value="formModel.file_path" :style="{width:'100%'}">
        </n-input>
      </n-form-item-grid-item>
    </n-grid>
    <n-space class="w-full pt-16px" :size="24" justify="end">
      <n-button class="w-72px" type="primary" @click="handleSubmit">确定</n-button>
    </n-space>
  </n-form>
</div>
</template>

<style scoped>

</style>
